<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajax life cycle</title>
<script src="http://code.jquery.com/jquery-1.4.2.js"></script>
<script>
	$(document).ready(function() {
		$("#starting").hide();
		$("#sending").hide();
		$("#success").hide();
		$("#complete").hide();

		// Ajax start
		$("#starting").bind("ajaxStart", function() {
			setTimeout(function() {
				$("#starting").show();
			}, 2000);
		});
		// Ajax sending
		$("#sending").bind("ajaxSend", function() {
			setTimeout(function() {
				$("#sending").show();
			}, 4000);
		});
		// Ajax sucess
		$("#success").bind("ajaxSuccess", function() {
			setTimeout(function() {
				$("#success").show();
			}, 6000);
		});
		//Ajax complete
		$("#complete").bind("ajaxComplete", function() {
			setTimeout(function() {
				$("#complete").show();
			}, 6500);
		});

		// Event ajax
		$.ajax({
			type : "POST",
			url : "poster.php",
			data : {
				data : 1
			},
			success : callback
		});
	});
	function callback(data, status) {
		setTimeout(function() {
			$("#results").text(data);
		}, 6500);
	}
</script>
</head>
<body>
	<h1>Handling Ajax events</h1>
	<div id="starting" style="color: #cecece">Starting...</div>
	<div id="sending" style="color: blue;">Sending...</div>
	<div id="success" style="color: green;">Successful...</div>
	<div id="complete" style="color: green;">Complete...</div>
	<br> Got this in response:
	<div id="results"></div>

</body>
</html>